<template>
    <div class="img__box">
        <img src="http://www.dell-lee.com/imgs/vue3/user.png" alt="png" class="img__box__conten">
    </div>
    <form action="#" class="user">
        <input type="text" placeholder="请输入手机号" class="user__Name" v-model="userData.userName">
        <input type="password" placeholder="请输入密码" class="user__Password" v-model="userData.userPassword">
        <input type="button" :value="userData.btnText" class="user__btn" @click="handleClick">
    </form>
    <div class="option">
        <span @click="registerClick">立即注册</span>
        <span>|</span>
        <span>忘记密码</span>
    </div>
    <Warn :warnData="toastData.warnData" v-if="toastData.iswarn"/>
</template>

<script>
import { useRouter } from 'vue-router'
import { reactive } from 'vue'
import { post } from '../../utils/axiosPost'
import Warn, { useToast } from './Warn'

// 发送表单请求
export const useAxiosFn = (url, loginWarnFn, mess, btn, toName) => {
  const router = useRouter()
  const userData = reactive({
    userName: '',
    userPassword: '',
    password: '',
    btnText: btn
  })
  const userPattern = /^[a-zA-Z0-9_-]{4,16}$/
  const handleClick = async () => {
    try {
      if (!userPattern.test(userData.userName) || !userData.userPassword) {
        loginWarnFn('密码或用户名错误')
        return
      }
      if (userData.btnText === '登录' || userData.password === userData.userPassword) {
        const data = JSON.stringify({
          username: userData.userName,
          password: userData.userPassword
        })
        const result = await post(url, data)
        if (result?.data) {
          if (userData.btnText === '注册') {
            router.push({ name: toName })
          } else {
            router.push({ name: toName })
          }
        } else {
          loginWarnFn(mess)
        }
      } else {
        loginWarnFn('密码不匹配')
      }
    } catch {
      loginWarnFn('请求失败')
    }
  }
  return { userData, handleClick }
}

//  跳转注册页面
const pushRegister = () => {
  const router = useRouter()
  const registerClick = () => {
    router.push({ name: 'Register' })
  }
  return { registerClick }
}

export default {
  name: 'Login',
  components: { Warn },
  setup () { // setup函数的职责是，告诉你代码执行的流程。多个方法会总到setup函数里。
    //   提示信息相关
    const { toastData, loginWarnFn } = useToast()
    // 发送表单数据请求相关
    const { userData, handleClick } = useAxiosFn('/api/user/login', loginWarnFn, '登录失败', '登录', 'Home')
    // 跳转注册页面
    const { registerClick } = pushRegister()

    return { handleClick, registerClick, userData, toastData }
  }
}
</script>

<style lang="scss">
@import '../../style/mixinApi.scss';
.img__box {
    margin:1.2rem 0 .4rem 0;
    text-align: center;
    &__conten {
        width: .66rem;
        height: .66rem;
    }
}
.user {
    padding:0 .4rem;
    &__Name {
        @include inputStyle();
        &::placeholder {
            @include inputPlaceholder();
        }
    }
    &__Password {
        @include inputStyle();
        margin-top: .16rem;
        &::placeholder {
            @include inputPlaceholder();
        }
    }
    &__btn {
        width: 100%;
        height: .48rem;
        border-radius: .04rem;
        box-shadow:0 .04rem .08rem 0 rgba(0,145,255,.32);
        background: #0091ff;
        border:none;
        margin-top: .32rem;
        line-height: .24rem;
        color: #ffffff;
        font-size: .16rem;
    }
}
.option {
    width: 100%;
    text-align: center;
    margin-top: .16rem;
    span {
        font-size: .14rem;
        color: rgba(0,0,0,0.50);
        line-height: .2rem;
    }
    span:nth-child(2){
        margin:0 .12rem;
    }
}
</style>
